<template>
  <!-- 中奖名单 -->
  <div class="winningList">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="80px"
        >
          <el-form-item prop="officeCode" label="办事处">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/office/ref/page"
              placeholder="请选择"
              lable-name="name"
              value-name="code"
              method="get"
              :value.sync="formData.officeCode"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="disCode" label="经销商">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/dealer/ref/page"
              method="get"
              placeholder="请选择"
              :params="{ query: { officeCode: formData.officeCode }, type: 0 }"
              lable-name="name"
              value-name="code"
              custom-name="codeOrName"
              :parent-id="formData.officeCode"
              :value.sync="formData.disCode"
              :current-id.sync="formData.disId"
              clearable
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="shopCode" label="门店">
            <SearchSelectPicker
              :url="'/call-center/api/v1/mscInfo/shop/list/' + formData.disId"
              placeholder="请选择"
              lable-name="name"
              value-name="code"
              method="get"
              :must-pid="true"
              :parent-id="formData.disId"
              :value.sync="formData.shopCode"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="customerName" label="顾客姓名">
            <el-input
              v-model="formData.customerName"
              placeholder="请输入顾客姓名"
              clearable
            />
          </el-form-item>
          <el-form-item prop="customerPhone" label="联系电话">
            <el-input
              v-model.trim="formData.customerPhone"
              number
              placeholder="请输入联系电话"
              clearable
            />
          </el-form-item>
          <el-form-item prop="prizeCode" label="奖品">
            <SearchSelectPicker
              url="/call-center/api/v1/carePrize/page"
              placeholder="请选择奖品"
              lable-name="prizeName"
              value-name="prizeCode"
              :params="{
                query: { state: { value: 1, operator: '=' } },
                type: 0,
              }"
              :value.sync="formData.prizeCode"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item hidden prop="lastUpdateByName" label="处理人">
            <el-input
              v-model="formData.lastUpdateByName"
              placeholder="请输入处理人"
              clearable
            />
          </el-form-item>
          <!-- <el-form-item prop="consignee" label="收货人">
            <el-input
              v-model="formData.consignee"
              placeholder="请输入收货人"
              clearable
            />
          </el-form-item>
          <el-form-item prop="consigneePhone" label="收货人电话">
            <el-input
              v-model.trim="formData.consigneePhone"
              number
              placeholder="请输入收货人电话"
              clearable
            />
          </el-form-item> -->
          <el-form-item prop="winningTime" :span="7" label="中奖时间">
            <el-date-picker
              v-model="formData.winningTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              opt
              operator=">"
              :limite="new Date()"
            />
          </el-form-item>
          <el-form-item show more :span="5">
            <Button @click="$refs.form.resetFields()">重置</Button>
            <ExportPane :table-config="tableConfig" :other-raw="otherRaw" :data-source="selectedAry" :query-data-fun="queryHandle" :fields="exportFields" filename="中奖名单">导出</ExportPane>
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box
        ref="table"
        no-request
        show-selection
        :selected-arry="selectedAry"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        @selection-change="selectionChange"
        @data-change="loading = false"
      >
        <el-table-column
          slot="before"
          type="index"
          align="center"
          label="序号"
          width="50"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <Care
              :text="scope.row.isCare === 0 ? '关怀' : '查看'"
              :title="scope.row.isCare === 0 ? '关怀' : '查看'"
              :row="scope.row"
              :preview="scope.row.isCare !== 0"
              @on-success="refreshTable('onPage')"
            />
          </template>
        </el-table-column>
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import Care from './components/Care'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import ExportPane from '@/components/ExportPane'
import { filtersRaw, addOneDay } from '@/utils'
export default {
  name: 'WinningList',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    Care,
    SearchSelectPicker,
    ExportPane
  },
  data() {
    return {
      loading: false,
      otherFilters: [],
      formData: {
        officeCode: '',
        disCode: '',
        shopCode: '',
        customerName: '',
        customerPhone: '',
        prizeCode: '',
        consignee: '',
        consigneePhone: '',
        winningTime: [],
        state: 1,
        lastUpdateByName: ''
      },
      formRules: {},
      tableConfig: {
        interfacePath: '/call-center/api/v1/careWinningList/page',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'deliveryCode',
            width: 140,
            label: '配送任务编码'
          },
          {
            prop: 'sourceCode',
            width: 140,
            label: '订单编号',
            isButton: true,
            className: 'table-click-text',
            clickFun: this.handlerClickSourceCode
          },
          {
            prop: 'officeName',
            width: 100,
            label: '办事处'
          },
          {
            prop: 'disName',
            width: 100,
            label: '经销商'
          },
          // {
          //   prop: 'shopName',
          //   width: 100,
          //   label: '门店'
          // },
          // {
          //   prop: 'remarks2',
          //   width: 140,
          //   label: '送装完成时间'
          // },
          {
            prop: 'customerName',
            width: 100,
            label: '顾客姓名'
          },
          {
            prop: 'customerPhone',
            width: 140,
            label: '联系电话',
            isButton: true,
            className: 'table-click-text',
            clickFun: row => {
              this.toCallOut(row.customerPhone, row.customerName)
            }
          },
          {
            prop: 'prizeName',
            width: 120,
            label: '奖品'
          },
          {
            prop: 'winningTime',
            width: 140,
            label: '中奖时间'
          },
          // {
          //   prop: 'consignee',
          //   width: 120,
          //   label: '收货人'
          // },
          // {
          //   prop: 'consigneePhone',
          //   width: 140,
          //   label: '收货人电话',
          //   isButton: true,
          //   className: 'table-click-text',
          //   clickFun: row => {
          //     this.toCallOut(row.consigneePhone, row.consignee)
          //   }
          // },
          {
            prop: '',
            width: 160,
            label: '收货人地址',
            formatData: (v) => {
              return `${v.provinceName || ''}${v.cityName || ''}${v.countyName || ''}${
                v.streetName || ''
              }${v.address || ''}`
            }
          },
          {
            prop: 'lastUpdateByName',
            label: '处理人',
            minWidth: 100
          },
          {
            prop: 'remarks',
            label: '备注',
            minWidth: 200
          }
        ]
      },
      selectedAry: [],
      otherRaw: {},
      exportFields: {
        isCare: {
          label: '是否关怀',
          formatData: v => {
            return [1, '1'].includes(v.isCare) ? '是' : '否'
          }
        }
      }
    }
  },
  methods: {
    // 查询
    queryHandle(type) {
      const list = []
      const eq = ['officeCode', 'disCode', 'shopCode', 'prizeCode', 'state']
      const like = [
        'customerName',
        'customerPhone',
        'consignee',
        'consigneePhone',
        'lastUpdateByName'
      ]
      const dateRange = ['winningTime']
      for (const [k, v] of Object.entries(this.formData)) {
        if (
          v === '' ||
          v === null ||
          v === undefined ||
          (v instanceof Array && v.length <= 0)
        ) {
          continue
        }
        if (eq.includes(k)) {
          list.push(filtersRaw(k, v, '='))
        } else if (like.includes(k)) {
          list.push(filtersRaw(k, v, 'like'))
        } else if (dateRange.includes(k)) {
          list.push(filtersRaw(k, v[0], '>='))
          list.push(filtersRaw(k, addOneDay(v[1]), '<'))
        }
      }
      this.otherFilters = list
      if (type !== 'export') {
        this.refreshTable()
      }
      return list
    },
    // 操作
    control() {},
    // 刷新表格
    refreshTable(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type || 'onPage')
      })
    },
    // 表格选中事件
    selectionChange(val) {
      this.selectedAry = val
    },
    // 跳转到外呼
    toCallOut(callTel, name) {
      this.$router.push({ name: 'CallOut', query: { callTel, name }})
    },
    handlerClickSourceCode(row) {
      const orderCode = row.sourceCode
      if (/^(LSK|LTK)/i.test(orderCode)) {
        // 线下
        this.$router.push({ name: 'ShopRetailDetail', query: { saleOrderCode: orderCode }})
      } else {
        // 线上
        // this.$router.push({ name: 'GoodsDetail', query: { pcode: this.taskData.orderCode }})
        this.$router.push({
          path: `/myiframe/urlPath?src=%2Fec-order-service%2ForderQuery&name=ECO订单查询&menuCode=${/^ccdev/.test(location.host) ? 'PC3539753' : 'PC7287737'}&esCode=${orderCode}`
        })
      }
    }
  }
}
</script>
<style lang='scss' module>
</style>
